<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set var="username" value="%{getText(\"field.username\")}" />
<s:set var="firstname" value="%{getText(\"field.firstname\")}" />
<s:set var="lastname" value="%{getText(\"field.lastname\")}" />
<s:set var="address" value="%{getText(\"field.street\")}" />
<s:set var="enabled" value="%{getText(\"field.enabled\")}" />
<s:set var="password" value="%{getText(\"field.password\")}" />
<s:set var="retypePassword"
	value="%{getText(\"field.retypePassword\")}" />
<s:set var="userLocale" value="%{getText(\"field.locale\")}" />
<s:set var="passwordMismatch"
	value="%{getText(\"error.user.password.mismatch\")}" />
<s:set var="listUser" value="%{getText(\"title.list.user\")}" />
<script type="text/javascript">
	/*   jQuery.extend($.fn.fmatter,{
	 password : function(cellvalue,options,rowdata) {
	 return "click to change";
	 }
	 });
	 */
	var grid = jQuery("#listUser");
	jQuery("#listUser")
			.jqGrid(
					{
						url : '${pageContext.request.contextPath}/security/getUsers.action',
						datatype : "json",
						colNames : [ 'ID', 'version',
								'<s:property value="#username" />',
								'<s:property value="#password" />',
								'<s:property value="#retypePassword" />',
								'<s:property value="#firstname" />',
								'<s:property value="#lastname" />',
								'<s:property value="#address" />',
								'<s:property value="#enabled" />',
								'<s:property value="#userLocale" />' ],
						colModel : [
								{
									name : 'id',
									index : 'id',
									editable : false,
									hidden : true,
									editrules : {
										edithidden : false
									},
									width : 10
								},
								{
									name : 'version',
									index : 'version',
									editable : true,
									hidden : true,
									width : 2
								},
								{
									name : 'username',
									index : 'username',
									editable : true,
									editrules : {
										required : true,
										edithidden : false,
									},
									width : 150
								},
								{
									name : 'password',
									index : 'password',
									width : 1,
									edittype : "password",
									editable : true,
									hidden : true
								},
								{
									name : 'retypePassword',
									index : 'retypePassword',
									width : 1,
									edittype : "password",
									editable : true,
									hidden : true
								},
								{
									name : 'firstname',
									index : 'firstname',
									editable : true,
									width : 100,
									editrules : {
										required : true
									}
								},
								{
									name : 'lastname',
									index : 'lastname',
									width : 100,
									editable : true,
									sortable : false
								},
								{
									name : 'address',
									index : 'address',
									editable : true,
									edittype : 'textarea',
									editrules : {
										required : true
									},
									editoptions : {
										rows : "5",
										cols : "50"
									},
									width : 300
								},
								{
									name : 'enabled',
									index : 'enabled',
									formatter : 'checkbox',
									width : 75
								},
								{
									name : 'userLocale',
									index : 'userLocale',
									width : 1,
									edittype : "select",
									editable : true,
									hidden : true,
									editrules : {
										edithidden : true,
										required : true
									},
									editoptions : {
										dataUrl : '${pageContext.request.contextPath}/security/getUserLocales.action',
										buildSelect : function(data) {
											var response = jQuery
													.parseJSON(data);
											var s = '<select>';
											for ( var i = 0; i < response.length; i++) {
												var record = response[i];
												s += '<option value="'+record.id+'">'
														+ record.description
														+ '</option>';
											}
											return s + "</select>";
										}
									}
								} ],
						jsonReader : {
							root : "rows",
							page : "page",
							total : "total",
							records : "records",
							repeatitems : false,
							id : "id",
							cell : "",
							userdata : ""
						},
						rowNum : 10,
						rowList : [ 10, 20, 30 ],
						pager : '#pagingUser',
						sortname : 'username',
						viewrecords : true,
						sortorder : "asc",
						multiselect : false,
						autowidth : true,
						height : 325,
						caption : "<s:property value='#listUser' />"
					})
			.navGrid(
					'#pagingUser',
					{
						edit : true,
						add : true,
						del : false,
						view : true
					},
					{
						url : '${pageContext.request.contextPath}/security/updateUser.action',
						modal : true,
						beforeShowForm : function(form) {
							$('#username').attr('readonly', 'readonly');
							$('#tr_password', form).hide();
							$('#tr_retypePassword', form).hide();
						},
						afterShowForm : function() {
							//$.jgrid.disableElements([ 'username' ]);
							$('input').attr('autocomplete', 'off');
						},
						beforeCheckValues : function(postdata, formid, mode) {
							grid.setColProp('password', {
								editrules : {
									required : false
								}
							});
							grid.setColProp('retypePassword', {
								editrules : {
									required : false
								}
							});
						},
						closeAfterEdit : false,
						afterSubmit : function(response, postdata) {
							var status = response.status;
							var msg = '';
							var success = false;
							if (status == 200) {
								var data = $.parseJSON(response.responseText);
								var respStatus = data.status;
								if (respStatus == 'SUCCESS') {
									success = true;
									if (data.attrs) {
										var version = data.attrs.version;
										$('#version').val(version);
									}
								} else {
									success = false;
									if (data.errors) {
										var errors = data.errors;
										for ( var i = 0; i < errors.length; i++) {
											msg += errors[i];
											if (i < errors.length - 1) {
												msg += ', ';
											}
										}
									}
								}
							}
							return [ success, msg, false ];
						},
						width : 500,
						recreateForm : true
					},
					{
						url : '${pageContext.request.contextPath}/security/createUser.action',
						modal : true,
						beforeShowForm : function(form) {
							$('#username').removeAttr('readonly');
							$('#tr_password', form).show();
							$('#tr_retypePassword', form).show();
						},
						afterShowForm : function(form) {

						},
						beforeCheckValues : function(postdata, formid, mode) {

							grid.setColProp('password', {
								editrules : {
									required : true,
									custom : true,
									custom_func : validatePassword
								}
							});
							grid.setColProp('retypePassword', {
								editrules : {
									required : true,
									custom : true,
									custom_func : validatePassword
								}
							});
						},
						serializeEditData : function(data) {
							return $.param($.extend({}, data, {
								id : ''
							}));
						},
						afterShowForm : function() {
							$('input').attr('autocomplete', 'off');
						},
						afterSubmit : function(response, postdata) {
							var status = response.status;
							var msg = '';
							var success = false;
							if (status == 200) {
								var data = $.parseJSON(response.responseText);
								var respStatus = data.status;
								if (respStatus == 'SUCCESS') {
									success = true;
									if (data.attrs) {
										var version = data.attrs.version;
										$('#version').val(version);
									}
								} else {
									success = false;
									if (data.errors) {
										var errors = data.errors;
										for ( var i = 0; i < errors.length; i++) {
											msg += errors[i];
											if (i < errors.length - 1) {
												msg += ', ';
											}
										}
									}
								}
							}
							return [ success, msg, false ];
						},
						width : 500,
						recreateForm : true
					});

	function validateAdd() {

	}

	function validatePassword(value) {
		var password = $('#password').val();
		if (password != value) {
			return [ false, '<s:property value="#passwordMismatch" />' ];
		}
		return [ true, "" ];
	}
</script>
<div style="width: 100%;">
	<table id="listUser"></table>
	<div id="pagingUser"></div>
</div>